<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>单人新增行数排名</title>
  <!-- 引入 Tabulator CSS -->

  <link rel="stylesheet" href="{{ url_for('static', filename='css/tabulator.min.css') }}">
  <!-- 引入 jQuery UI CSS（用于日期选择） -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/jquery-ui.css') }}">
  <!-- 引入 Bootstrap CSS（用于按钮和布局） -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
  <!-- 引入自定义 CSS -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/tabulator_simple.min.css') }}">
  <style>
    .filters-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .filters-container label {
      margin-right: 10px;
    }
    .filter-group {
      display: flex;
      gap: 10px;
    }
  </style>
</head>
<body>
  <h1>单人新增行数排名</h1>

  <!-- 筛选表单 -->
  <div class="filters-container">
    <div class="filter-group">
      <label>开始日期: <input type="text" id="start-date" class="datepicker"></label>
      <label>结束日期: <input type="text" id="end-date" class="datepicker"></label>
      <button class="btn btn-secondary" id="last-1-month">最近1个月</button>
      <button class="btn btn-secondary" id="last-3-months">最近3个月</button>
      <button class="btn btn-secondary" id="last-1-year">最近一年</button>
      <button class="btn btn-secondary" id="no-time-limit">不限时间</button>
    </div>
    <div class="filter-group">
      <label>项目名称:
        <select id="project-name" >
          <option value="">选择项目</option>
        </select>
      </label>
      <label>作者搜索: <input type="text" id="author-name" placeholder="Author Email/Name"></label>
    </div>
    <div class="filter-group">
      <label>按项目展示:</label>
      <input type="checkbox" id="project-toggle">
    </div>
    <button id="filter-btn" class="btn btn-primary">筛选</button>
    <button id="export-btn" class="btn btn-success">导出为Excel</button>  <!-- 导出按钮 -->
  </div>

  <!-- 表格容器 -->
  <div id="ranking-table"></div>

  <!-- 引入 Tabulator JS -->
  <script src="{{ url_for('static', filename='js/tabulator.min.js') }}"></script>
  <!-- 引入 jQuery 和 jQuery UI -->
  <script src="{{ url_for('static', filename='js/jquery-3.5.1.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/jquery-ui.min.js') }}"></script>
  <!-- 引入 Bootstrap JS -->
  <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/xlsx.full.min.js') }}"></script>
  <script>
    // 初始化日期选择器
    $(".datepicker").datepicker({
      dateFormat: "yy-mm-dd"
    });

    // 拉取项目名称并填充到下拉框
    $(document).ready(function() {
      $.ajax({
        url: '/api/project_names',
        method: 'GET',
        success: function(data) {
          let projectSelect = $('#project-name');
          data.forEach(function(project) {
            projectSelect.append(new Option(project, project));
          });
        },
        error: function(err) {
          console.error('加载项目名称失败', err);
        }
      });
    });

    // 初始化表格
    let table = new Tabulator("#ranking-table", {
<!--      height: "500px",-->
      layout: "fitColumns",
      columns: [
        {title: "作者", field: "author_name", widthGrow: 2},
        {title: "新增行数", field: "total_lines_added", sorter: "number", widthGrow: 1},
        {title: "提交次数", field: "commit_count", sorter: "number", widthGrow: 1},
        {title: "项目", field: "project_name", widthGrow: 1, visible: false}  // 项目名称列，默认隐藏
      ],
    });

    // 定义加载数据的函数
    function loadTableData() {
      let startDate = document.getElementById('start-date').value;
      let endDate = document.getElementById('end-date').value;
      let projectName = document.getElementById('project-name').value;
      let authorName = document.getElementById('author-name').value;
      let showByProject = document.getElementById('project-toggle').checked;

      let params = new URLSearchParams();
      if (startDate) params.append("start_date", startDate);
      if (endDate) params.append("end_date", endDate);
      if (projectName) params.append("project_name", projectName);
      if (authorName) params.append("author_name", authorName);
      if (showByProject) params.append("show_by_project", "true");

      table.setData("/api/single_user_data?" + params.toString());

      // 根据按项目展示的开关调整表格列的显示
      if (showByProject) {
        table.showColumn("project_name");  // 显示项目名称列
      } else {
        table.hideColumn("project_name");  // 隐藏项目名称列
      }
    }

    // 在表格完全构建后加载数据
    table.on("tableBuilt", function(){
      loadTableData();
    });

    // 点击筛选按钮时加载数据
    document.getElementById('filter-btn').addEventListener('click', () => {
      loadTableData();
    });

    // 快捷按钮：最近1个月
    document.getElementById('last-1-month').addEventListener('click', function() {
      let date = new Date();
      date.setMonth(date.getMonth() - 1);
      document.getElementById('start-date').value = date.toISOString().split('T')[0];
      document.getElementById('end-date').value = new Date().toISOString().split('T')[0];
      loadTableData();
    });

    // 快捷按钮：最近3个月
    document.getElementById('last-3-months').addEventListener('click', function() {
      let date = new Date();
      date.setMonth(date.getMonth() - 3);
      document.getElementById('start-date').value = date.toISOString().split('T')[0];
      document.getElementById('end-date').value = new Date().toISOString().split('T')[0];
      loadTableData();
    });

    // 快捷按钮：最近一年
    document.getElementById('last-1-year').addEventListener('click', function() {
      let date = new Date();
      date.setFullYear(date.getFullYear() - 1);
      document.getElementById('start-date').value = date.toISOString().split('T')[0];
      document.getElementById('end-date').value = new Date().toISOString().split('T')[0];
      loadTableData();
    });
    document.getElementById('no-time-limit').addEventListener('click', function() {
      // 清除开始和结束日期
      document.getElementById('start-date').value = '';
      document.getElementById('end-date').value = '';

      // 触发筛选操作，重新加载数据（清除时间过滤条件）
      loadTableData();
    });
    // 导出按钮 - 导出为Excel
    document.getElementById('export-btn').addEventListener('click', function() {
      table.download("xlsx", "ranking_data.xlsx", {
        sheetName: "单人新增行数排名",
      });
    });
  </script>
</body>
</html>